<template>
  <view class="my-radio">
    <view class="radio" :class="{ active }">
      <view class="circle"></view>
    </view>
    <slot></slot>
  </view>
</template>
<script setup>
defineProps({
  active: {
    type: Boolean,
    default: false,
  },
});
</script>
<style scoped lang="scss">
.my-radio {
  display: inline-flex;
  align-items: center;
  margin-left: 30rpx;
  margin-bottom: 20rpx;
  .radio {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    box-sizing: border-box;
    border: 2px solid rgba(216, 216, 215, 1);
    transition: border-color 0.3s ease;
    margin-right: 10rpx;
    position: relative;
    &.active {
      border-color: $primary-color;
      .circle {
        scale: 1;
      }
    }
    .circle {
      scale: 0;
      width: 12px;
      height: 12px;
      background: $primary-color;
      border-radius: 100px;
      position: absolute;
      left: 2px;
      top: 2px;
      transition: scale 0.3s ease;
    }
  }
}
</style>